<template>
  <div ref="canvas" :style="{ width: size, height: size }"></div>
</template>
<script>
import Clunch from "clunch/dist/clunch-template.core";
import processWave from "@clunch/process-wave";

Clunch.series("ui-process-wave", processWave);

export default {
  props: {
    size: {
      type: String,
      default: "300px",
    },
    process: {
      type: [Number, String],
      default: 0,
    },
  },
  data: function () {
    return {
      clunch: null,
    };
  },
  watch: {
    process: function () {
      this.clunch.process = this.process;
    },
  },
  mounted: function () {
    var that = this;
    this.clunch = new Clunch({
      el: this.$refs.canvas,
      time: 2000,
      data: function () {
        return {
          process: that.process,
          deep: 0,
        };
      },
      template:
        "<ui-process-wave c-bind:process='process' c-bind:deep='deep' />",
      mounted: function () {
        var that = this;
        setInterval(function () {
          that.deep = that.deep == 0 ? 1 : 0;
        }, 2000);
      },
    });
  },
};
</script>


